<div class="tab-configuration tab-mixer toolbar_fixed_bottom">
    <div class="content_wrapper" id="mixer-main-content">
        <div class="tab_title" data-i18n="tabMixer">Mixer</div>
        <!-- Top row -->
        <div>
            <div class="leftWrapper">
                <div class="platform-type gui_box grey">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title" data-i18n="platformConfiguration"></div>
                    </div>
                    <div class="spacer_box">
                        <div class="select">
                            <select id="platform-type"></select>
                            <label for="platform-type">
                                <span data-i18n="platformType"></span>
                            </label>
                        </div>
                        <div id="has-flaps-wrapper" class="checkbox">
                            <input type="checkbox" id="has-flaps" class="toggle" />
                            <label for="has-flaps">
                                <span data-i18n="platformHasFlaps"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rightWrapper">
                <div class="platform-type gui_box grey">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title" data-i18n="mixerPresetTitle"></div>
                    </div>
                    <div class="spacer_box">
                        <div class="select position-relative">
                            <div class="mixerPreview" style="max-width: 175px">
                                <img src="./resources/motor_order/custom.svg" />
                            </div>
                            <div class="half" style="width: calc(50% - 10px); margin-left: 10px;">
                                <select id="mixer-preset"></select>
                            </div>
                            <div class="mixer-load-button">
                                <div class="btn default_btn narrow green is-hidden">
                                    <a id="mixer-wizard" href="#" data-i18n="mixerWizard"></a>
                                </div>
                                <div class="btn default_btn narrow red">
                                    <a id="load-and-apply-mixer-button" href="#" data-i18n="mixerLoadAndApplyPresetRules"></a>
                                </div>
                                <div class="btn default_btn narrow">
                                    <a id="load-mixer-button" href="#" data-i18n="mixerLoadPresetRules"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear-both"></div>

        <div class="gui_box grey">
            <div class="gui_box_titlebar">
                <div class="spacer_box_title" data-i18n="mappingTableTitle"></div>
            </div>
            <table class="output-table">
                <tr id="output-row">

                </tr>
                <tr id="function-row">

                </tr>
            </table>
        </div>

        <!-- middle row -->
        <div class="clear-both"></div>
        <!-- bottom row -->
        <div class="motor-mixer gui_box grey">
            <div class="gui_box_titlebar">
                <div class="spacer_box_title" data-i18n="motorMixer"></div>
            </div>
            <div class="spacer_box">
                <table id="motor-mix-table" class="mixer-table">
                    <thead>
                        <tr>
                            <th style="width: 75px">Motor</th>
                            <th data-i18n="controlAxisThrottle"></th>
                            <th data-i18n="controlAxisRoll"></th>
                            <th data-i18n="controlAxisPitch"></th>
                            <th data-i18n="controlAxisYaw"></th>
                            <th class="delete"></th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <div class="btn default_btn narrow pull-right green mixer_btn_add">
                    <a href="#" data-role="role-motor-add" data-i18n="servoMixerAdd"></a>
                </div>
            </div>
        </div>
        <div class="motor-mixer gui_box grey">
            <div class="gui_box_titlebar">
                <div class="spacer_box_title" data-i18n="servoMixer"></div>
            </div>
            <div class="spacer_box">
                <table id="servo-mix-table" class="mixer-table">
                    <thead>
                        <tr>
                            <th style="width: 75px" data-i18n="servo"></th>
                            <th data-i18n="input"></th>
                            <th data-i18n="fixedValue" class="mixer-fixed-value-col"></th>
                            <th data-i18n="weight"></th>
                            <th data-i18n="speed"></th>
                            <th data-i18n="active"></th>
                            <th class="delete"></th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <div class="btn default_btn narrow pull-left mixer_btn_add">
                    <a href="#" data-role="role-logic-conditions-open" data-i18n="tabLogicConditions"></a>
                </div>
                <div class="btn default_btn narrow pull-right green mixer_btn_add">
                    <a href="#" data-role="role-servo-add" data-i18n="servoMixerAdd"></a>
                </div>
            </div>
        </div>

        <div id="logic-wrapper" style="display: none">
            <div class="logic__background"></div>
            <div class="logic__content">
                <div class="tab_title" data-i18n="tabLogicConditions"></div>
                <div class="logic__content--wrapper">
                    <table class="mixer-table logic__table">
                        <thead>
                            <tr>
                                <th style="width: 50px" data-i18n="logicId"></th>
                                <th style="width: 80px" data-i18n="logicEnabled"></th>
                                <th style="width: 120px" data-i18n="logicOperation"></th>
                                <th data-i18n="logicOperandA"></th>
                                <th data-i18n="logicOperandB"></th>
                                <th data-i18n="logicActivator"></th>
                                <th data-i18n="logicFlags"></th>
                                <th data-i18n="logicStatus"></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class="logic__content--buttons content_toolbar">
                    <div class="btn save_btn">
                        <a href="#" class="logic__save" data-i18n="logicSave"></a>
                    </div>
                    <div class="btn save_btn red">
                        <a href="#" class="logic__close" data-i18n="logicClose"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="mixerApplyContent" class="is-hidden">
        <div class="modal__content">
            <h1 class="modal__title modal__title--warning" data-i18n="presetsApplyHeader"></h1>
            <div class="modal__text" data-i18n="mixerApplyDescription"></div>
        </div>
        <div class="modal__buttons">
            <a id="execute-button" class="modal__button modal__button--main" data-i18n="mixerButtonSaveAndReboot"></a>
        </div>
    </div>
    <div id="mixerWizardContent" class="is-hidden">
        <div class="modal__content">
            <h1 class="modal__title modal__title--warning" data-i18n="mixerWizardModalTitle"></h1>
            <div class="modal__text">
                <p data-i18n="mixerWizardInfo"></p>
                <table style="margin-top: 1em;" class="mixer-table">
                    <thead>
                        <th data-i18n="mixerWizardMotorPosition"></th>
                        <th data-i18n="mixerWizardMotorIndex"></th>
                    </thead>
                    <tbody>
                        <tr>
                            <th data-i18n="motorWizard0"></th>
                            <td>
                                <select class="wizard-motor-select" data-motor="0">
                                    <option id="0" selected="selected">Motor #1</option>
                                    <option id="1">Motor #2</option>
                                    <option id="2">Motor #3</option>
                                    <option id="3">Motor #4</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th data-i18n="motorWizard1"></th>
                            <td>
                                <select class="wizard-motor-select" data-motor="1">
                                    <option id="0">Motor #1</option>
                                    <option id="1" selected="selected">Motor #2</option>
                                    <option id="2">Motor #3</option>
                                    <option id="3">Motor #4</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th data-i18n="motorWizard2"></th>
                            <td>
                                <select class="wizard-motor-select" data-motor="2">
                                    <option id="0">Motor #1</option>
                                    <option id="1">Motor #2</option>
                                    <option id="2" selected="selected">Motor #3</option>
                                    <option id="3">Motor #4</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th data-i18n="motorWizard3"></th>
                            <td>
                                <select class="wizard-motor-select" data-motor="3">
                                    <option id="0">Motor #1</option>
                                    <option id="1">Motor #2</option>
                                    <option id="2">Motor #3</option>
                                    <option id="3" selected="selected">Motor #4</option>
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="modal__buttons">
            <a id="wizard-execute-button" class="modal__button modal__button--main" data-i18n="mixerWizardModalApply"></a>
        </div>
    </div>
    <div class="content_toolbar">
        <div class="btn save_btn">
            <a id="save-button" class="save" href="#" data-i18n="configurationButtonSave"></a>
        </div>
    </div>
</div>